<template>
  
    <div>
        <!-- 新建补卡规则 -->
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <router-link to="/ExaminationGroupAdd"><el-button type="primary"  style="margin: 20px;">新建考勤组</el-button></router-link>
                </div>
            </el-col>
        </el-row>
        
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <el-form :inline="true" :model="attendanceGroupsEntity" class="demo-form-inline">
                        <el-form-item style="margin: 20px;" label="关键词">
                            <el-input v-model="attendanceGroupsEntity.attendanceName" placeholder="请输入内容"></el-input>
                        </el-form-item>
                        <el-form-item style="margin: 20px;" label="类型">
                            <el-select v-model="attendanceGroupsEntity.attendanceType" placeholder="请选择">
                                <el-option
                                v-for="item in attendanceTypes"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                :disabled="item.disabled">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item style="margin: 20px;float: right;">
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                            <el-button @click="rest">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
        </el-row>

        <!-- 展示参数start -->
        <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-dark">
                <br>
                <el-table
                  :data="attendanceGroups"
                  border
                  style="width: 95%;margin: auto;"
                  :header-cell-style="{backgroundColor:'#F4F4F4'}">
                  <el-table-column
                    prop="attendanceName"
                    label="考勤组名称">
                  </el-table-column>
                  <el-table-column
                    label="类型">
                    <template slot-scope="scope">
                        <span v-if="scope.row.clockSets.attendanceType=='0'">
                            固定班次
                        </span>
                        <span v-else-if="scope.row.clockSets.attendanceType=='1'">
                            排版制    
                        </span>
                        <span v-else>
                            自由班制
                        </span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="考勤时间">
                    <template slot-scope="scope">
                      <span v-if="scope.row.clockSets.attendanceType==0">
                        <span v-for="val,index in scope.row.clockSets.days" :key="index">
                            <span v-if="index%2==0">{{ val }}、</span>
                            </span>
                        </span>
                      <span v-else-if="scope.row.clockSets.attendanceType==2">
                        <span v-for="val,index in scope.row.clockSets.days" :key="index">
                          {{ val }}、
                        </span>
                      </span>
                      <span v-else>
                          <span v-if="scope.row.clockSets.scheduledBreaks==0">
                            末排班员工不可打卡
                          </span>
                          <span v-if="scope.row.clockSets.scheduledBreaks==1">
                            员工可打卡，无需选班次
                          </span>
                          <span v-if="scope.row.clockSets.scheduledBreaks==2">
                            员工可打卡，需要先选班次
                          </span>
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="tuser.username"
                    label="负责人">
                  </el-table-column>
                  <el-table-column
                    label="人数">
                    <template slot-scope="scope">
                        {{ scope.row.num }} 人
                    </template>
                    
                  </el-table-column>
                  <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                      <el-button type="text" @click="upData(scope.row.id,1)">修改</el-button>
                      <el-button type="text" @click="upData(scope.row,0)">删除</el-button>
                    </template>
                  </el-table-column>


                </el-table>
                <br>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pageNum"
                  :page-sizes="[10, 100, 200, 400]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
                  style="margin-left: 750px;">
                </el-pagination>
                <br>
              </div>
            </el-col>
        </el-row>
        <!-- 展示参数end -->
    </div>
  </template>
  
  <script>
import axios from 'axios';
import { parseTime } from '@/utils/ruoyi';
  export default {
      name:"examinationGroupIndex.vue",
      data(){
          return{
            attendanceGroups:[],
            pageNum:0,
            pageSize:10,
            total:0,
            attendanceGroupsEntity:{},
            time:[],
            attendanceTypes: [
                {
                    value: "",
                    label: '全部'
                },
                {
                    value: '0',
                    label: '固定班次'
                },
                {
                    value: '1',
                    label: '排版制'
                }, {
                    value: '2',
                    label: '自由班制'
                }
            ],
          }
      },
      created(){
        this.getAttendanceGroups();
      },
      methods:{
        onSubmit() {
          this.getAttendanceGroups();
        },
        getAttendanceGroups(){
          // 获取班次信息
          axios.post("/AttendanceGroup/findAll?"+"pageSize="+this.pageSize+"&pageNum="+this.pageNum,this.attendanceGroupsEntity)
          .then((res)=>{
            console.log(res)
            let date = res.data.data.rows;
            for (const val of date) {
                val.clockSets.days = val.clockSets.days.split(",");
            }
            this.attendanceGroups = date; 
            this.total = res.data.data.total;
          })
        
        }, 

        handleSizeChange(val) {
          this.pageSize = val;
          console.log(`每页 ${val} 条`);
          this.getAttendanceGroups();
        },
        handleCurrentChange(val) {
          this.pageNum = val;
          console.log(`当前页: ${val}`);
          this.getAttendanceGroups();
        },

        // 修改/删除补卡规则
        upData(Id,status){
          if(status==0){
            Id.clockSets.days = "";
            axios.post("/AttendanceGroup/delAttendance",Id)
            .then((res)=>{
              this.getAttendanceGroups();
              if(res.data==1){
                this.$message({
                  message:"删除成功!!!",
                  type:"success"
                });
              }else{
                this.$message.error("删除失败请重试!");
              }
            })
          }else{
            this.$router.push({name:"ExaminationGroupAdd",params:{id:Id}});
          }
          
        },
        // 重置条差
        rest(){
            this.attendanceGroupsEntity = {};
            this.time=[];
            this.getAttendanceGroups();
        },
      }
  }
  </script>
  
  <style scoped>
    .el-row {
      margin-bottom: 20px;
      
    }
    .el-col {
      border-radius: 4px;
    }
    .bg-purple-dark {
      background: white;
    }
    .grid-content {
      border-radius: 8px;
      min-height: 36px;
    }
    .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
    }
    .el-icon-search{
        display: block;
    }




  /* 防止地图自动完成的对象被遮挡 */
  .tangram-suggestion {
    z-index: 9999;
  }
  </style>